<template>
  <div class="about">
    <my-header>许愿墙</my-header>
    <my-input v-model="dream"></my-input>
    <select-img @sendimg="getImg" :num="num"></select-img>
    <button class="btn" :disabled="disabled" @click="addDream">{{text}}</button>
    <div class="dream-box">
      <ul>
        <li v-for="(item, i) in dreamList" :key="item.id" :style="{
          backgroundImage: 'url(' + item.backimg + ')',
          left: item.left,
          top: item.top
        }" @click="edit(item)" @touchstart="touchStart($event, i)" @touchmove="touchMove($event, i)" @touchend="touchEnd">
          {{item.content}}
          <span @click.stop="del(i)">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myHeader from '@/components/header/myHeader'
import myInput from '@/components/input/myInput'
import selectImg from '@/components/selectImg/selectImg'
export default {
    components: {
      myHeader,
      myInput,
      selectImg
    },
    data() {
      return {
        dream: '',
        text: '再想想',
        disabled: true,
        img: '',
        dreamList: [],
        startX: 0,
        startY: 0,
        isEdit: false,
        editDream: {},
        num: -2
      }
    },
    created() {
      this.dreamList = JSON.parse(localStorage.getItem('dreams'))  || []
    },
    methods: {
      checkClick() {
        if(this.isEdit) {
          this.disabled = false
          this.text = "修改"
        } else {
          if(this.dream && this.img) {
            this.disabled = false
            this.text = "许愿"
          } else {
            this.disabled = true
            this.text = "再想想"
          }
        }
        
      },
      getImg(img) {
        this.img = img
        if(this.isEdit) {
          this.editDream.backimg = img
        } else {
          this.checkClick()
        }
        
        
      },
      addDream() {
        if(this.isEdit) {
          this.editDream.content = this.dream
          this.dream = ''
          this.isEdit = false
          this.disabled = true
        } else {
          const obj = {
            content: this.dream,
            backimg: this.img,
            left: Math.random()*295 + 'px',
            top: Math.random()*300 + 'px',
            id: new Date().getTime()
          }
          if(this.dreamList.length < 6) {
            this.dreamList.push(obj)
            // console.log(this.dreamList)
            this.dream = ''
            this.disabled = true
          } else {
            this.$loading.show('愿望上限了')
            setTimeout(() => {
              this.$loading.hide()
            }, 1000);
          }
        }
        this.num = this.num === -1 ? -2 : -1
        localStorage.setItem('dreams', JSON.stringify(this.dreamList))
      },

      touchStart(e, i) {
        this.startX = e.touches[0].pageX - parseFloat(this.dreamList[i].left) 
        this.startY = e.touches[0].pageY - parseFloat(this.dreamList[i].top) 
      },

      touchMove(e, i) {
        this.dreamList[i].left = e.touches[0].pageX - this.startX + 'px'
        this.dreamList[i].top = e.touches[0].pageY - this.startY + 'px'
      },

      touchEnd() {
        localStorage.setItem('dreams', JSON.stringify(this.dreamList))
      },

      del(i) {
        this.dreamList.splice(i, 1)
        localStorage.setItem('dreams', JSON.stringify(this.dreamList))
      },

      edit(item) {
        this.dream = item.content
        this.isEdit = true
        this.editDream = item
        localStorage.setItem('dreams', JSON.stringify(this.dreamList))
      }
    },

    watch: {
      dream() {
        // console.log(this.disabled)
        this.checkClick()
      }
    }
}
</script>
<style lang="scss" scoped>
    .btn{
      display: block;
      width: 60px;
      text-align: center;
      border-radius: 4px;
      line-height: 30px;
      border: none;
      background-color: green;
      color: #fff;
      margin: 20px auto;
    }
    .btn[disabled] {
      background-color: #ccc;
      color: #eee;
    }

    .dream-box{
      position: relative;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li{
        position: absolute;
        width: 80px;
        height: 80px;
        background-repeat: none;
        background-size: 100% 100%;
        background-position: center center;
        line-height: 80px;
        color: #fff;
        text-align: center;
        font-weight: bold;
        span{
          position: absolute;
          right: 1px;
          top: 1px;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #ccc;
        }
      }
    }
</style>
